<template>
  <div class="page-workplace">
    <!-- 提供一个富文本编辑器的容器 -->
    <div class="editor"></div>
    <!-- 主动指定如下元素作为 toolbar -->
    <div class="editor_toolbar"></div>

    <n-button @click="handleClick">提交</n-button>

    <!-- 下面是一个详情界面，调用后端接口返回的是带有格式的文本内容，要渲染到页面上，应该如何操作 -->
    <div class="box" v-html="detail"></div>
  </div>
</template>

<script>
// 引入 quill
import Quill from "quill";
// 引入 quill 的样式
import "quill/dist/quill.snow.css";

export default {
  data() {
    return {
      detail: null
    }
  },  

  mounted() {
    // 实例化即可
    this.quill = new Quill(".editor", {
      theme: "snow",

      modules: {
        // toolbar: '.editor_toolbar'
        // toolbar: ['bold', 'italic', 'underline', 'strike', 'color']
        toolbar: [
          ["bold", "italic", "underline", "strike"],
          [{ color: [] }],
          ["clean"],
        ],
      },
    });
  },

  methods: {
    handleClick() {
      // 获取到富文本输入框输入的内容。
      // console.log(this.quill.getText());
      // getText() 获取纯文本
      // getHtml() 获取带有格式的文本，已经删除了这个API，需要额外找方法
      console.log(this.quill.root.innerHTML); // <p><strong>asdfasdfasdfasdfdsf</strong></p><p><br></p><p><br></p><p><strong style="color: rgb(230, 0, 0);">1233123123123123</strong></p>

      // 假设获取接口得到的内容就是 上面的带有格式的文本
      this.detail = this.quill.root.innerHTML
    },
  },
};
</script>

<style lang="scss" scoped>
.editor,
.box {
  width: 400px;
  height: 500px;
  border: 1px solid #000;
}
</style>
